<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="target" type="checkbox" name="" id="">孙悟空<br>
    <input class="target" type="checkbox" name="" id="">猪八戒<br>
    <input class="target" type="checkbox" name="" id="">沙和尚<br>
    <input class="target" type="checkbox" name="" id="">唐僧<br>
    <input class="all" type="checkbox" name="" id="">全选

</body>
<script>
    //创建事件源

    let all=document.querySelector(".all");
    let targets=document.querySelectorAll(".target");
    console.log(all.checked);
    console.log(targets);
    //创建动作
    all.onclick=function(){
        targets.forEach(element => {
            element.checked=all.checked;
            element.onclick=function(){
                if(element.checked==false){
                    all.checked=false;
                }
            }
        });

    }
   
</script>
</html>